<!--
   【表格表头】过滤组件
   思想：
   【输入内容筛选】  或者  【多选已知条件筛选】
   1、输入的内容就单纯按内容筛选。
   2、选择选项筛选就按已知选择项筛选。
 -->
<template>
  <el-popover
    placement="bottom"
    width="200"
    trigger="click"
    @show="showPopover"
    @after-leave="afterLeaveClick"
    ref="popoverRef"
  >
    <el-input placeholder="请输入内容" v-model="inputValue" ref="sInput" size="mini" @input="confirm"></el-input>

    <div class="checkBox">
      <!-- 多选形式 -->
      <el-checkbox-group v-model="selectList" @change="checkClick">
        <el-checkbox :label="item" v-for="(item, index) in popoverList[property]" :key="index"></el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button
      type="primary"
      size="mini"
      @click="changeSelectClick"
      style="margin-top: 5px"
      :disabled="!isAllow"
    >搜 索</el-button>
    <el-button size="mini" @click="resetData">重 置</el-button>
    <!-- 放大镜按钮 -->
    <div slot="reference" style="margin-left: 5px" @click.stop>
      <i class="el-icon-magic-stick" :class="iconColor ? 'isShowClass' : ''"></i>
    </div>
  </el-popover>
</template>

<script>
import { debounce } from "../../../assets/js/debounce"; // 防抖
export default {
  name: "popover",
  data() {
    return {
      popoverList: {}, // 父组件传过来的条件数据
      inputValue: "", // 输入的值
      iconColor: false,
      selectList: [], // 多选选中的值
      isAllow: false,
      timeSaveSelectList: [] // 多选选中的值
    };
  },
  props: {
    property: {
      //  当前的字段名
      type: String,
      default: ""
    },
    checkList: {
      // 每个字段对应的数据
      type: Object,
      default: {}
    }
  },
  watch: {
    checkList: {
      handler(nav) {
        this.popoverList = JSON.parse(JSON.stringify(nav));
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    showPopover() {
      this.$nextTick(() => {
        this.$refs.sInput.focus(); // 输入框的光标
      });
    },

    // 【输入框】输入筛选内容过滤条件
    confirm: debounce(function() {
      this.popoverList[this.property] = this.checkList[this.property].filter(
        item => {
          return item
            .toString()
            .toLowerCase()
            .includes(this.inputValue.toString().toLowerCase());
        }
      );
    }, 500),

    // 选中事件
    checkClick() {
      if (this.selectList.length != 0) {
        this.isAllow = true;
        this.iconColor = true;
      } else {
        this.isAllow = false;
        this.iconColor = false;
      }
    },

    // 重置数据
    resetData() {
      console.log(this.popoverList);
      const self = this;
      self.inputValue = ""; // 输入的值
      self.selectList = []; //选中的选项
      self.iconColor = false;
      this.$emit("resetChange", {
        property: this.property,
        selectList: this.selectList // 将选中的过滤条件传回给父组件
      });
      this.timeSaveSelectList = JSON.parse(JSON.stringify(self.selectList));
      this.$refs.popoverRef.doClose(); // 关闭popover弹出框
    },

    // 【搜索】按钮的点击事件
    changeSelectClick() {
      this.$emit("selectChange", {
        property: this.property,
        selectList: this.selectList // 将选中的过滤条件传回给父组件
      });
      this.timeSaveSelectList = JSON.parse(JSON.stringify(this.selectList));
      this.$refs.popoverRef.doClose(); // 关闭popover弹出框
    },

    // el-popover隐藏的时候触发,为了修改了选中的过滤值，却没有点搜索的时候，选中值更新回原来选中的值
    afterLeaveClick() {
      this.selectList = JSON.parse(JSON.stringify(this.timeSaveSelectList));
      this.checkClick();
    }
  }
};
</script>
<style scoped>
.isShowClass {
  color: blue;
  font-weight: 700;
}

.checkBox {
  max-height: 100px;
  overflow: auto;
  padding: 10px 0;
}

.checkBox .el-radio-group {
  display: flex;
  flex-direction: column;
}

.checkBox .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
</style>
<style>
.checkBox .el-radio-group .el-radio .el-radio__label {
  font-size: 13px !important;
}
</style>


